﻿/*
调整el-menu的样式，主要包括：
  一、页面左侧的侧标栏部分
*/
/* *****一、侧边栏 */
.dark_main_left {
  overflow: hidden !important;
  &>.el-menu {
    background-color: transparent;
    border: none;
    width: 100%;
    height: calc(100% - 40px);
    overflow: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar{
      width: 6px;
      height: 8px;
      cursor: pointer;
    }
    &::-webkit-scrollbar-track{
      background: rgba(21,130,178,.5);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb{
      background: rgba(21,130,178,1);
      border-radius: 6px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: $theme_main_hover_color;
    }
    // 下部展示的是菜单---展开的样式
    // 菜单的单个条目
    .el-menu-item {
      min-width: 100%;
      font-size: 16px;
      color: $theme_silderMenu_font_color;
      font-weight: 500;
      height: 48px;
      line-height: 48px;
      margin-bottom: 4px;
      border: 1px solid transparent;
      .linkEl {
        font-size: 18px;
        color: $theme_silderMenu_font_color;
      }
    }
    // 菜单的容器
    .el-menu {
      border: none;
      background: transparent;
      .el-menu {
        .slider_titleContent {
          font-size: 16px;
        }
      }
    }
    /* 一级菜单标题的字体大小 */
    .el-submenu__title {
      font-size: 18px;
      color: $theme_silderMenu_font_color;
    }
    .slider_titleContent{
      font-size: 18px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 162px;
    }
    .linkEl{
      display: block;
      height: 100%;
    }
    // 二级菜单部分
    .el-submenu {
      // 二级菜单内的
      .el-menu-item{
        height: 40px;
        line-height: 38px;
        // padding: 0 0 0 50px !important;
        .linkEl {
          font-size: 16px;
          color: $theme_silderMenu_font_color;
          font-weight: 500;
        }
      }
    }
    /* 二级标题部分上下设置间距 */
    .el-menu--inline {
      margin: 5px 0;
    }
    /* 当打开时字体图标的样式 */
    li.is-opened {
      &>div.el-submenu__title {
        &>i.icon_After {
          transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -webkit-transform: rotate(90deg); /* Safari 与 Chrome */
        }
      }
    }
    /* 前面的小箭头 */
    i.icon_before{
      font-size: 20px;
      display: inline-block;
      color: $theme_silderMenu_font_color;
    }
    // 后面的小箭头
    .icon_After{
      position: absolute;
      right:20px;
      top:0;
      font-size: 20px;
      color: $theme_silderMenu_font_color;
    }
    /* 选中或者鼠标移入一级的样式 */
    .is-active .el-submenu__title,
    .is-opened .el-submenu__title,
    .el-submenu__title:hover{
      background: $theme_silderMenu_firstLevel_bg_color;
      color: #fff !important;
      i.iconfont{
        color:#fff !important;
      }
    }
    // 二级菜单也为白色
    .is-opened .el-menu .el-menu-item{
      color: #fff;
      .linkEl{
        color: #fff;
      }
    }
    /* 选中或者鼠标移入二级的样式 */
    .el-menu-item.is-active,
    .el-menu-item:hover {
      background: $theme_silderMenu_secondLevel_bg_color !important;
      color: $theme_main_hover_color !important;
      i.iconfont {
        color: $theme_main_hover_color
      }
      .linkEl{
        color: $theme_main_hover_color !important;
      }
    }
    // 右侧的箭头隐藏
    .el-submenu__icon-arrow{
      display: none;
    }
    // 不可点击时的样式
    .el-menu-item.is-disabled{
      opacity: 1;
      cursor: pointer;
    }
    .el-menu-item.is-disabled:hover{
      background: transparent !important;
    }
    .el-menu-item.silder_linkContent:hover{
      background: $theme_silderMenu_secondLevel_bg_color !important;
    }
    .el-menu-item:focus{
      background: transparent;
    }
  }
}
// 侧边栏折叠起来时
.dark_main_collapse {
  .icon_After {
    display: none;
  }
  .dark_main_left {
    .el-menu-item {
      height: 48px;
      line-height: 48px;
    }
  }
  .el-menu-item,
  .el-submenu__title {
    padding: 0 !important;
    text-align: center;
    .el-tooltip {
      padding: 0 !important;
      text-align: center;
    }
  }
  i.icon_before {
    font-size: 24px !important;
  }
}
// 侧边菜单折叠时的弹出菜单样式
.collapse_pop{
  background-color: rgba(42,44,106,1);
  .el-menu--popup{
    background-color: $theme_silderMenu_bg_color;
    .el-menu-item{
      font-size: 16px;
      color: $theme_silderMenu_font_color;
      font-weight: 500;
      height: 38px;
      line-height: 38px;
      margin-bottom: 4px;
      border: 1px solid transparent;
      .linkEl {
        color: $theme_silderMenu_font_color;
        display: block;
      }
    }
    .el-menu-item.is-active,
    .el-menu-item:hover {
      background: $theme_silderMenu_secondLevel_bg_color;
      color: $theme_main_hover_color !important;
      .linkEl{
        background: $theme_silderMenu_secondLevel_bg_color;
        color: $theme_main_hover_color !important;
      }
    }
    .el-menu-item.silder_linkContent{
      opacity: 1;
    }
    .el-icon-arrow-right {
      display: none;
    }
    .el-submenu {
      width: 200px;
      .el-submenu__title {
        height: 38px;
        position: relative;
        .icon_After{
          position: absolute;
          right:20px;
          top:0;
          font-size: 20px;
          line-height: 38px;
          color: $theme_silderMenu_font_color;
        }
        &:hover,
        &.is-active {
          background: $theme_silderMenu_secondLevel_bg_color;
          color: $theme_silderMenu_secondLevel_font_color !important;
          i {
            color: #fff;
          }
        }
      }
    }
    .slider_titleContent{
      display: block;
      font-size: 16px;
      color: $theme_silderMenu_font_color;
      font-weight: 500;
      height: 38px;
      line-height: 38px;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 162px;
    }
    .silder_linkContent:hover{
      color: #fff;
      background: $theme_silderMenu_secondLevel_bg_color !important;
    }
  }
}
// 二级菜单时
.collapse_pop_top{
  background-color: transparent;
  .el-menu--popup{
    background-color: $theme_silderMenu_bg_color;
    .el-menu-item{
      font-size: 16px;
      color: $theme_silderMenu_font_color;
      font-weight: 500;
      height: 38px;
      line-height: 38px;
      margin-bottom: 4px;
      border: 1px solid transparent;
      background: transparent;
      .linkEl {
        color: $theme_silderMenu_font_color;
      }
    }
    .el-menu-item.is-active,
    .el-menu-item:hover {
      background: $theme_silderMenu_secondLevel_bg_color;
      color: $theme_main_hover_color !important;
      .linkEl{
        background: $theme_silderMenu_secondLevel_bg_color;
        color: $theme_main_hover_color !important;
      }
    }
    .el-menu-item.silder_linkContent{
      opacity: 1;
      cursor: pointer;
    }
    .el-menu-item.silder_linkContent:hover{
      background: $theme_silderMenu_secondLevel_bg_color !important;
    }
  }
}